<template>
    <!-- 顶部 -->
    <div class="shopbody">
        <div class="top">
            <div class="hui" @click="goLast"> &lt; </div>
            <div class="topT">国潮</div>
        </div>
    </div>
    <!-- 商品图：精灵图 -->
    <div class="carousel">
        <div class="slides">
            <div class="slide">
                <img :src="page" alt="">
            </div>
        </div>
    </div>
    <!-- 商品详情 -->
    <div>
        <div class="objname">{{ obj.name }}</div>
        <div class="objprice">￥{{ obj.price }}&nbsp;&nbsp;<span>{{ obj.price }}0</span></div>
        <div class="objtag">
            <div>运费：免运费</div>
            <div>剩余：45</div>
            <div>销量：25</div>
            <div>收藏：5263</div>
        </div>
        <div class="jiange">.</div>
        <div class="itemchange">
            <div>优惠：</div>
            <div>暂无 &nbsp; > </div>
        </div>
        <div class="jiange2">.</div>
        <div class="itemchange">
            <div>规格：</div>
            <div>默认 &nbsp; > </div>
        </div>
        <div class="jiange">.</div>
        <div class="objname">评价</div>
        <div class="itempl">暂无评论</div>
        <div class="jiange">.</div>
        <div class="objname">商品详情</div>
        <div class="info"><img :src="goodinfo" alt=""></div>
    </div>
</template>

<script setup lang="ts">
import { ref,} from 'vue';
import { useRoute, useRouter } from 'vue-router'
import page from '@/assets/shopViewImage/page.png'
import goodinfo from '@/assets/shopViewImage/goodinfo.png'

const route = useRoute()
const router = useRouter()
const currentSlide = ref(0);
let obj = ref(route.query)

const goLast = () => {
    router.go(-1)
}


</script>

<style lang='less' scoped>
.shopbody {
    padding-top: 5px;
    width: 390px;
}

.top {
    width: 390px;
    position: fixed;
    top: 0;
    background-color: #fff;
    z-index: 99;
    display: flex;
    height: 50px;
    line-height: 50px;
}

.topT {
    margin-left: 140px;
    font-size: x-large;
}

.hui {
    margin-left: 10px;
    font-size: xx-large;
}

.carousel {
    margin-top: 40px;
    overflow: hidden;
    width: 390px;
}

.slide img {
    width: 390px;
    height: 200px;
    overflow: hidden;
}

.objname {
    font-size: x-large;
    margin-top: 10px;
    margin-left: 10px;
}

.objprice {
    margin-top: 10px;
    margin-left: 6px;
    font-size: xx-large;
    color: red;
}

.objprice span {
    color: rgb(176, 182, 182);
    text-decoration: line-through;
    font-size: x-large;
    vertical-align: middle;
}

.objtag {
    margin: 15px 2px;
    display: flex;
    justify-content: space-around;
    font-weight: 600;
}

.jiange {
    width: 390px;
    line-height: 14px;
    background-color: rgb(232, 232, 233);
    color: rgb(232, 232, 233);
}

.jiange2 {
    width: 390px;
    line-height: 2px;
    background-color: rgb(232, 232, 233);
    color: rgb(232, 232, 233);
}

.itemchange {
    font-size: xx-large;
    font-weight: 600;
    margin: 15px 11px;
    display: flex;
    justify-content: space-between;
}

.itempl {
    color: rgb(176, 182, 182);
    margin: 15px auto;
    text-align: center;
}

.info {
    text-align: center;
    margin: 15px auto;
}

.info img {
    width: 390px;
}
</style>
